<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-bind</title>
	</head>
	<style>
		.classA{
			color: red;
		}
		.classB{
			color: greenyellow;
		}
		[v-cloak] {
			display: none;
		}
	</style>
	<body>
		<h1>v-bind</h1>
		<br>
		<div id="app">
			<img v-bind:src="imgSrc" alt="">
			<a :href="url" target="_blank">百度</a>

			<div :class="{classA:isOk}">边荒</div>
			<div>
				<input type="checkbox" id="isOk" v-model="isOk">
				<label for="isOk">{{isOk}}</label>
			</div>

			<div :class="isOk?classA:classB">边荒奇景</div>

			<div v-pre>{{message}}</div>

			<div v-cloak>{{message}}</div>

			<div v-once>{{message}}</div>
			<div>
				<input type="text" v-model="message">
			</div>

			<div v-jspang="color" id="demo">{{num}}</div>
			<div>
				<button @click="add">Add</button>
			</div>
		</div>
		<hr>
		<author></author>
	
		
	</body>
	<script src="lib/vue.js"></script>
	<script type="text/javascript">
		Vue.directive('jspang',function(el,binding,vnode){
			el.style='color:'+binding.value;
		});
		
		var app =new Vue({
			el: "#app",
			data: {
				imgSrc: "http://c.hiphotos.baidu.com/image/h%3D300/sign=5975ff04f41986185e47e9847aec2e69/7acb0a46f21fbe09810db97167600c338744ad00.jpg",
				url: "https://www.baidu.com",
				isOk: true,
				classA: 'classA',
				classB: 'classB',
				message: '我送出的犁，敌人铸成了剑，刺穿了祖国的海防线',
				num: 10,
				color: 'red'
			},
			methods: {
				add: function() {
					this.num++;
				}
			},
		
			beforeCreate:function(){
                console.log('1-beforeCreate 初始化之后');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被创建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }
		});
		var authorExtend = Vue.extend({
			template: "<p><a :href='authorUrl'>{{authorName}}</a></p>",
			data: function() {
				return{
					authorName:'AA',
					authorUrl:'http://www.jspang.com'
				}
			}
		});
		new authorExtend().$mount('author');
	</script>
</html>
